<template>
  <div class="zcjd-warp">
    <div class="zcjd-header">
      <p class="title">{{ newsData.title }}</p>
      <span>发布日期：{{ newsData.releaseDate }}</span>
    </div>
    <div class="zcjd-body">
      <div v-html="newsData.content"></div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
import axios from "axios";

const route = useRoute()

onMounted(() => {
  if (route.query.id) {
    getData(route.query.id)
  }
})

const newsData = ref({})
const getData = async (id) => {
  const {data} = await axios.get('http://localhost:9763/system/news/' + id)
  newsData.value = data.data
}
</script>

<style scoped>


.zcjd-warp {


}

.zcjd-header {
  padding: 20px;
  text-align: center;
}

.zcjd-header .title {
  font-size: 24px;
  font-weight: bold;
}

.zcjd-body {
  font-size: 16px;
}
</style>
